<template>
	<view class="popFix">
		<uni-popup ref="popup" type="bottom" background-color="#fff"  >
			
			<view class="opera">
				<view class="title">
					播放列表
				</view>
				<view class="playWay" @click="changeWay">
					
						<i class="icon-singlecycle iconfont one"  v-if="isCicle"></i> <view class=""  v-if="isCicle">
							单曲循环
						</view>
						<i class="icon-CYCLE iconfont list"  v-if="!isCicle"></i> <view class=""  v-if="!isCicle">
							列表循环
						</view>
					
				
				</view>
				
			</view>
			<scroll-view class="content" :scroll-y="true" :show-scrollbar="false">
				<view class="mItem" v-for="(item,index) of musicList" :key="index" >
					<span class="name">{{item.name}}</span> · <span class="author">{{item.author}}</span>
				</view>
			</scroll-view>
		</uni-popup>
	</view>
</template>

<script setup>
	import { ref,defineProps,watch } from 'vue'
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {index,musicList,isCicle} from "@/store/music.js"
	let popup=ref()
	
	const props=defineProps({
		isOpen:Boolean
	})
	watch(()=>props.isOpen,()=>{
		// console.log(111)
		popup.value.open()
	})
	const changeWay=()=>{
	isCicle.value=!isCicle.value
	}



</script>

<style lang="scss" scoped>
	.popFix{
		position: fixed;
		bottom: -50px;
	}
	.opera{
	
		border-bottom: 1px solid salmon ;
		padding: 50rpx 20rpx 20rpx 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.title{
			font-size: 35rpx;
			font-size: 600;
			
		}
		.playWay{
			color: #80808E;
			font-size: 25rpx;
			display: flex;
			align-items: center;
			border: 1px solid rgba(185, 185, 185, 0.3); 
			border-radius: 20rpx;
			padding: 5rpx;
			cursor: pointer;
			.iconfont{
				display: inline-block;
			
			}
			.list{
				font-size: 30rpx;
			}
			.one{
				font-size: 35rpx !important;
			}
		}
	}
	.content {
		max-height: 70vh;
		overflow-y: auto;
		/* 横向滚动 */
		-webkit-overflow-scrolling: touch;
		
		/* iOS滚动流畅性 */
		// background-color: #F8F9FD;
		.mItem{
			padding: 20rpx 20rpx 0 20rpx;
		
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			// display: flex;
			// align-items: center;
			.name{
				padding-right: 10rpx;
			
			}
			.author{
				font-size: 20rpx;
				padding-left: 10rpx;
				color: gray;
				
			}
		}
		}
	       
</style>
